<template>
	<view class="content">
		<view class="send" style="height: 10vh;background-color:#48C9B0;color:#FFF2CC;font-size: 40rpx;">
				<text>	发布</text>
		</view>
		<view class="top">
			<view @click="btn1" class="btn1">
				<u-icon name="arrow-left" color="#000" size="50rpx"></u-icon>
			</view>
			<view class="btn3">
				<image style="width: 60rpx;height: 60rpx;"
					src="https://mp-ccffe9fb-6491-49ff-938f-e2f9c933dbd6.cdn.bspapp.com/font-icon/fabu.png" mode="">
				</image>
			</view>
			<view style="width: 120rpx;" class="btn1">
				<u-button :disabled="isdisabled" text="发布" @click="btn2" shape="circle" type="primary"></u-button>
			</view>
		</view>
		
		<!-- 283b65 -->
		<view class="artictitle">
			<u-input :customStyle="{'backgroundColor':'#fff'}" placeholder="标题~~" v-model="valuetitle" maxlength="15"
				:clearable="true" color="#000"></u-input>
		</view>
		<view class="textarea">
			<u--textarea color="#c2d5ff" maxlength="100" count v-model="value1" placeholder="说点什么吧~~~"></u--textarea>
		</view>
		<view class="needUpLoad">
			<view class="Uploadvideo" v-show="upload">
				<u-upload :fileList="fileList2" @afterRead="afterRead" name="2" multiple :maxCount="10" accept="video"
					:previewFullImage="true"></u-upload>
			</view>
			<view v-show="progress">
				<u-line-progress :percentage="percentage" activeColor="#86E57F"></u-line-progress>
			</view>
		</view>

		<view class="showvideo"  v-if="fileID">
			<view class="closevideo"  @click.stop="cancelvideo">
					<u-icon  color="#eee" size="28" name="close"></u-icon>
			</view>
			<video :src="fileID"></video>
		</view>
		<view class="bakcimage" @click="uploadImage" v-if="!fileID2">
			<u-icon name="plus" color="#c2d5ff" size="28"></u-icon>
		</view>
		<view class="loadingImage" v-if="fileID2">
			<u-icon class="closes" @click="cancel" color="#c2d5ff" size="28" name="close"></u-icon>
			<image @click="previewImage" :src="fileID2" mode="aspectFill" style="width: 100%;height: 100%;"></image>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				valuetitle: "",
				value1: "",
				fileList2: [],
				fileList1: [],
				percentage: 0,
				fileID: '',
				fileID2: '',
				test: '',
				articleinfo: {
					title: '',
					content: '',
					viede_address: '',
					avatar:''
				},
				//是否禁用发布按钮
				isdisabled: false
			};

		},
		computed: {
			progress() {
				if (this.percentage > 0 && this.percentage < 100) {
					return true
				} else {
					return false
				}

			},
			upload() {
				if (!this.fileID && !this.progress) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			btn1() {
				uni.navigateBack()
			},
			btn2() {
				
				this.articleinfo.content = this.value1.trim()
				this.articleinfo.title = this.valuetitle.trim()
				if (this.articleinfo.title == '') {
					uni.showToast({
						title: '没有标题',
						icon: "none"
					})
					return;
				}
				if (this.articleinfo.viede_address == '') {
					uni.showToast({
						title: "未上传视频",
						icon: "none"
					})
					return;
				}
				if(this.articleinfo.avatar == ''){
					uni.showToast({
						title: "未上视频封面",
						icon: "none"
					})
					return;
				}
				db.collection("video-articles").add({
					...this.articleinfo
				}).then(res => {
					uni.showToast({
						title: "发布成功"
					})
					uni.$emit('updateindex')
					uni.switchTab({
						url: '/pages/index/index'
					})
				})
				console.log(this.articleinfo)
			},

			afterRead(event) {
				uni.showLoading({
					mask: true
				})
				let that = this
				uniCloud.uploadFile({
					filePath: event.file[0].url,
					cloudPathAsRealPath: true,
					cloudPath: 'video-article/' + Date.now() + '.mp4',
					onUploadProgress: function(progressEvent) {
						console.log(progressEvent);
						let percentCompleted = Math.round(
							(progressEvent.loaded * 100) / progressEvent.total
						);
						console.log(percentCompleted)
						that.percentage = percentCompleted
					},
					success: e => {
						this.fileID = e.fileID
						console.log(this.fileID)
						this.articleinfo.viede_address = e.fileID
						uni.showToast({
							title: `成功`
						})
						uni.hideLoading()
					},
					fail(e) {
						uni.showToast({
							title: `失败`,
							icon: "error"
						})



					}
				})
			},
			uploadImage() {
			
				uni.chooseImage({
					count: 1,
					success: async res => {
						let Namesuffix = ''
						console.log(res);
						console.log(res.tempFiles[0])
						if (res.tempFiles[0].name) {
							//h5存在name
							console.log(res.tempFiles[0].name.split('.'))
							Namesuffix = res.tempFiles[0].name.split('.')[1]
							console.log(Namesuffix)
						} else {
							//app和小程序不存在
							console.log(res.tempFiles[0].path.split('.'))
							Namesuffix = res.tempFiles[0].path.split('.')[1]
							console.log(Namesuffix)

						}
						uni.showLoading({
							
						})
						await uniCloud.uploadFile({
							filePath: res.tempFiles[0].path,
							cloudPath: '/user_info/' + Date.now() + '.' + Namesuffix,
							success: async e => {
								console.log(e, '成功了')

								this.fileID2 = e.fileID
								this.articleinfo.avatar=e.fileID
								console.log(this.fileID2, '拿到？')
								uni.hideLoading()
							},
							fail() {},
							complete() {}

						})
					}
				})
			},
			//分类
			checkboxClick(name) {
				//index判断传入的值是否已经存在数组中
				let index = this.articleinfo.category_id.indexOf(this.checkboxs[name].text)
				console.log(this.checkboxs[name].text)
				if (this.articleinfo.category_id.length < 2 && index == -1) {
					this.checkboxs[name].checked = !this.checkboxs[name].checked
					this.articleinfo.category_id.push(this.checkboxs[name].text)
				} else {
					if (index == -1) {
						uni.showToast({
							title: "最多两个",
							icon: 'none'
						})
					} else {
						this.checkboxs[name].checked = !this.checkboxs[name].checked
						this.articleinfo.category_id.splice(index, 1)
					}
				}
			},
			previewImage() {
				uni.previewImage({
					urls: [
						`${this.fileID2}`
					]
				})
			},
			//取消图片
			cancel() {
				this.fileID2 = ''
			},
			//	取消视频
			cancelvideo() {
				this.fileID = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.bakcimage {
			height: 160rpx;
			width: 160rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bakcimage:active {
			background-color: #c2d5ff;
		}

		.showvideo{
			margin-bottom: 20rpx;
			width: 60vw;
			height: 30vh;
			position: relative;
			video{
				width: 100%;
				height: 100%;
			}
		.closevideo {
				position: absolute;
				right: -45rpx;
				top: -20rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.loadingImage {
			width: 400rpx;
			height: 250rpx;
			position: relative;

			.closes {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1000;
			}
		}

		.send {
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 600;
			font-family: "楷体";
			text{
				margin-top: 20rpx;
			}
		
		}

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			// background-color: #eee;
			// 11265c
			//283b65
			background-color: #A7C5BD;
			margin-bottom: 30rpx;

			.btn1,
			.btn2 {
				flex: 1;
			}

			.btn3 {
				flex: 2;
				display: flex;
				justify-content: center;
			}
		}

		.tag {
			display: flex;
			// height: 30rpx;
			justify-content: space-around;
			margin-bottom: 20rpx;
		}

		.artictitle {
			margin: 10rpx 0;
		}

		.needUpLoad {
			margin-top: 30rpx;
		}
	}
</style>
<style>
	page {
		background-color: #48C9B0;
	}
</style>